/*
 * @Description: 检测任务管理操作
 * @Author: zzt
 * @Date: 2022-12-31 11:17:43
 * @LastEditTime: 2023-02-07 17:31:55
 */

import { useMemo, useState } from 'react';
import {
  Button,
  DatePicker,
  Divider,
  Form,
  Input,
  Radio,
  RadioChangeEvent,
  Select,
  Space
} from 'antd';
import cs from 'classnames';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import { useGuidanceTypeContext } from '../contexts/GuidanceWaysContext';
import { useBusinessGuidanceContext } from '../contexts/BusinessGuidanceContext';
import CreateBusinessDialog from './dialogs/CreateBusiness';
import UpLoadBusiness from './dialogs/UpLoadBusiness';
import styles from '../styles/pageOperate.module.scss';

const cx = classNames.bind(styles);

const options = [
  { label: '全部', value: 0 },
  { label: '未读', value: 1 },
  { label: '已读', value: 2 }
];

const sendOptions = [
  { label: '全部', value: 0 },
  { label: '未提交', value: 1 },
  { label: '待审核', value: 2 },
  { label: '审核中', value: 3 },
  { label: '审核通过', value: 4 },
  { label: '审核不通过', value: 5 }
];

const PageOperate = (props: any) => {
  const { classname } = props;
  const { type, title } = useGuidanceTypeContext();
  const { selectItems, deleteItem, getEnclosure, enclosure, setSendStatus } =
    useBusinessGuidanceContext();

  // 新增弹窗
  const [createVisible, setCreateVisible] = useState(false);
  // 执行检测弹窗
  const [upDataVisible, setUpDataVisible] = useState(false);
  const [taskValue, setTaskValue] = useState(0);

  const onChangeRadio = ({ target: { value } }: RadioChangeEvent) => {
    console.log('value', value);
    setSendStatus({ sendStatus: value });
    setTaskValue(value);
  };

  const onChange = () => {
    getEnclosure(selectItems[0], type);
    setUpDataVisible(true);
  };

  const onPerform = () => {
    deleteItem(selectItems, `您已选择了${selectItems.length}个年检审核单，是否确认移除?`, type);
  };
  const onFinish = (value: any) => {
    const year = dayjs(value.year).format('YYYY');
    setSendStatus({ ...value, year });
    console.log('chaxun', value);
  };
  return (
    <div className={cs('filter-container', 'page-operate', classname)}>
      {type === 3 && (
        <>
          <div className={cx('year-form')}>
            <Form
              layout="inline"
              colon={false}
              onFinish={onFinish}
              initialValues={{ sendStatus: 0 }}
            >
              <Form.Item label={title}></Form.Item>
              <Form.Item name="year" label="年度">
                <DatePicker picker="year" />
              </Form.Item>
              <Form.Item name="sendStatus" label="状态">
                <Select options={sendOptions}></Select>
              </Form.Item>
              <Form.Item label="关键词查询">
                <Input placeholder="请填写关键词" />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </Form.Item>
            </Form>
          </div>
          <Space size="small">
            <Divider type="vertical" />
            <Button
              onClick={() => {
                setCreateVisible(true);
              }}
            >
              新增
            </Button>

            {selectItems.length === 1 ? (
              <Button
                onClick={() => {
                  onChange();
                }}
              >
                修改
              </Button>
            ) : (
              <Button disabled>修改</Button>
            )}
            {selectItems.length > 0 ? (
              <Button onClick={onPerform}>删除</Button>
            ) : (
              <Button disabled>删除</Button>
            )}
          </Space>
        </>
      )}
      {type !== 3 && (
        <>
          <div>
            {title}
            <Radio.Group
              options={options}
              onChange={onChangeRadio}
              value={taskValue}
              className={cx('butLeft')}
            />
          </div>
          <Space>
            <Divider type="vertical" />
            <Button>筛选检索</Button>
          </Space>
        </>
      )}
      {useMemo(
        () => (
          <CreateBusinessDialog
            visible={createVisible}
            onClose={() => {
              setCreateVisible(false);
            }}
          />
        ),
        [createVisible]
      )}
      {useMemo(
        () => (
          <UpLoadBusiness
            visible={upDataVisible}
            data={enclosure}
            onClose={() => {
              setUpDataVisible(false);
            }}
          />
        ),
        [upDataVisible, enclosure]
      )}
    </div>
  );
};

export default PageOperate;
